

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%response.addHeader("x-frame-options", "SAMEORIGIN");%>
<%
    String token = java.util.UUID.randomUUID().toString();
    session.setAttribute("token", token);
%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>电压监测管理系统</title>

        <script>
            var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv"
                    + "wxyz0123456789+/" + "=";
            function encode64(input) {

                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;
                do {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2)
                            + keyStr.charAt(enc3) + keyStr.charAt(enc4);
                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";
                } while (i < input.length);

                return output;
            }
            function check() {                
                var user = document.getElementById("pa11").value;
                var pass = document.getElementById("pa22").value;
                user = encode64(user);
                pass = encode64(pass);
                document.getElementById("pa11").value = user;
                document.getElementById("pa22").value = pass;
            }
            function refresh()
            {
                document.getElementById("Checkcode").src = "Checkcode?now=" + new Date();//使用时间作为参数避免浏览器从缓存取图片  
                var check = document.getElementById("checkcodetext");
                if (check.value != "校验码") {
                    check.value = "校验码";
                    check.style.color = "#c0c0c0";
                }
            }

            function inputuser(i)
            {
                var user = document.getElementById("pa11");
                var pass = document.getElementById("pa22");
                var check = document.getElementById("checkcodetext");
                switch (i) {
                    case 1:
                        if (user.value == "用户名") {
                            user.value = "";
                            user.style.color = "black";
                        }
                        if (pass.value == "") {
                            pass.type = "text";
                            pass.value = "密码";
                            pass.style.color = "#c0c0c0";
                        }
                        if (check.value == "") {
                            check.value = "校验码";
                            check.style.color = "#c0c0c0";
                        }
                        break;
                    case 2:
                        if (user.value == "") {
                            user.value = "用户名";
                            user.style.color = "#c0c0c0";
                        }
                        if (pass.value == "密码") {
                            pass.type = "password";
                            pass.value = "";
                            pass.style.color = "black";
                        }
                        if (check.value == "") {
                            check.value = "校验码";
                            check.style.color = "#c0c0c0";
                        }
                        break;
                    case 3:
                        if (user.value == "") {
                            user.value = "用户名";
                            user.style.color = "#c0c0c0";
                        }
                        if (pass.value == "") {
                            pass.type = "text";
                            pass.value = "密码";
                            pass.style.color = "#c0c0c0";
                        }
                        if (check.value == "校验码") {
                            check.value = "";
                            check.style.color = "black";
                        }
                        break;
                    case 4:
                        if (user.value == "") {
                            user.value = "用户名";
                            user.style.color = "#c0c0c0";
                        }
                        if (pass.value == "") {
                            pass.type = "text";
                            pass.value = "密码";
                            pass.style.color = "#c0c0c0";
                        }
                        if (check.value == "") {
                            check.value = "校验码";
                            check.style.color = "#c0c0c0";
                        }
                        break;
                }

            }

            function bodyonload() {

            }

        </script>
        <style>
            div.form{
                position:absolute;
                right: 220px;
                bottom: 50px;
                width:  1500px; 
                height: 800px;
                z-index:-1;
            }

            div.title{
                font-family: "黑体";
                position:absolute;
                top: 10px;
                left: 30px;
                right: 350px;
                bottom: 100px;
                width:  1000px;
                z-index:-1;
                color: #191970;
            }
            img.title{
                width: 150px;
                height: 125px;
            }
            span.Layer1{
                position:absolute;
                font-weight: bold;
                top: 60px;
                left: 160px;
                width:  900px;
                letter-spacing: 20px;
                font-size:30px;
            }
            span.Layer2{
                position:absolute;
                font-weight: bold;
                top: 95px;
                left: 167px;
                width:  900px;
                font-size:20px;
            }
            span.Layer3{
                position:absolute;
                font-weight: bold;
                top: 230px;
                left: 100px;
                width: 1200px;
                font-size:60px;
            }
            span.Layer4{
                position:absolute;
                font-weight: bold;
                top: 320px;
                left: 50px;
                width:  1000px;
                font-size: 25px;
                color:#0066cc;
            }

            div.user{
                position:absolute;
                top: 200px;
                left:  1000xp;
                right: 20px;
                z-index:-1;
                border-style: solid;
                border-color: #c0c0c0;
                border-width: 2px;
                width: 300px;
                height: 345px;


            }

            input.user{
                font-family: "宋体";
                color: #C0C0C0;
                position:absolute;
                width: 220px;
                height: 20px;
                top: 55px;
                left:  44px;   
                text-height: 29px;
            }

            img.user {
                position:absolute;
                top: 56px;
                left:  20px;
                width: 24px;
                height: 24px;
            }
            input.pass{
                font-family: "宋体";
                color: #C0C0C0;
                position:absolute;
                width: 220px;
                height: 20px;
                top: 105px;
                left:  44px;
                text-height: 29px;
            }
            img.pass {
                position:absolute;
                top: 106px;
                left:  20px;
                width: 24px;
                height: 24px;
            }
            input.check{
                font-family: "宋体";
                color: #C0C0C0;
                position:absolute;
                width: 100px;
                height: 20px;
                top: 158px;
                left:  20px;
                text-height: 29px;
            }
            img.check {
                position:absolute;
                height: 25px;
                top: 158px;
                left:  125px;
            }
            span.check{
                position:absolute;
                top: 164px;
                left: 225px;
            }
            span.save{
                position:absolute;
                top:213px;
                left: 125px;
                font-size: 10px;
            }
            input.login{
                font-family: "黑体";
                position:absolute;
                width: 250px;
                height: 45px;
                top: 266px;
                left:  20px;
                font-size:15px;
                color: #ffffff;
                background-color : #00cccc;
                border-color: #00cccc;
                border-style: solid;
                border-radius: 5px;
            }

            div.bottom{
                width:100%;
                height: 20px;
                position:absolute;
                text-align: center;
                bottom: 10px;
            }
            span.layer5{
                font-family: "arial";
                font-size:20px;
                color: #FFFFFF;
            }
            span.layer6{
                font-size:20px;
                color: #ffffff;
            }
            div.titlelayer{
                position:absolute;
                top:50px;
                left:200px;
            }
            span.titlelayer1{
                font-size:40px;
                font-weight: bold;
                font-family: "黑体";
                color: #cccccc;

            }
            span.titlelayer2{
                font-size:20px;
                font-weight: bold;
                font-family: "黑体";
                color: #cccccc;
            }
        </style>

    </head>

    <body leftmargin="0" topmargin="0" rightmargin="0" topmargin="0" onload="bodyonload()">      
        <img src="image/login/loginback9.jpg" width="100%"  style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1" id="imgform">
        <form action="LoginServlet" method="post"  name="form1" id="form1" onsubmit="check()">
            <div class="form" name="divform" id="divform">
                <div id="divtitlelayer" class="titlelayer">
                    <p>
                        <span class="titlelayer1">
                            欢迎使用电压监测智能管理系统
                        </span>
                    </p>
                    <span class="titlelayer2">
                        Welcome To The Intelligent Management System Voltage Monitoring
                    </span>
                </div>
                <div class="title" id="divtitle">


                    <span class="Layer3">
                        欢迎使用电压监测智能管理系统
                    </span>
                    <span class="Layer4">
                        Welcome To The Intelligent Management System Voltage Monitoring
                    </span>
                </div>
                <div class="user" id="divuser">

                    <img src="image/login/user.jpg"   class="user">
                    <input type="text" name="pa11" id="pa11"  value="用户名" maxlength="32" tabindex="1" class="user" onclick="inputuser(1)" onblur="inputuser(4)" onfocus="inputuser(1)"/>

                    <img src="image/login/pass.jpg" class="pass">
                    <input type="text" name="pa22" id="pa22"  value="密码" maxlength="32" tabindex="2" class="pass" onclick="inputuser(2)" onblur="inputuser(4)" onfocus="inputuser(2)"/>

                    <input type="text" name="checkcodetext" id="checkcodetext"  value="校验码" maxlength="32" tabindex="3" class="check" onclick="inputuser(3)" onblur="inputuser(4)" onfocus="inputuser(3)"/>
                    <img src="Checkcode" mce_src="Checkcode" id="Checkcode" align="absmiddle" class="check" onclick="refresh()"><a href="#" mce_href="#" onclick="refresh()">
                        <span style="font-size:15px" mce_style="font-size:12px" class="check">换一张</span></a>

                    <input type="hidden" name="token" value="<%=token%>"/>
                    <input type="submit" value="登   录" class="login">
                </div>
                <div class="bottom" id="divbottom">
                    <span class="layer5">
                        联系方式： 电话：0511-8888888 传真:0511-8888888 邮箱：tlf@126.com
                    </span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <span class="layer6">
                        &copy 2014 江苏镇江泰利丰电子有限公司 版权所有
                    </span>

                </div>
            </div>
        </form> 
        <script type="text/javascript">
            <!--
            var winWidth = 0;
            var winHeight = 0;
            function findDimensions() //函数：获取尺寸
            {
                //获取窗口宽度
                if (window.innerWidth)
                    winWidth = window.innerWidth;
                else if ((document.body) && (document.body.clientWidth))
                    winWidth = document.body.clientWidth;
                //获取窗口高度
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;

                //通过深入Document内部对body进行检测，获取窗口大小
                if (document.documentElement && document.documentElement.clientHeight &&
                        document.documentElement.clientWidth)
                {
                    winHeight = document.documentElement.clientHeight;
                    winWidth = document.documentElement.clientWidth;
                }
                //结果输出至两个文本框
                if (winWidth < 1705) {
                    document.getElementById("divform").style.left = "1px";
                }
                if (winWidth > 1705) {
                    document.getElementById("divform").style.left = "";
                }
                if (winHeight < 855) {
                    document.getElementById("divform").style.top = "1px";
                    document.getElementById("divbottom").style.display = "none";
                }
                if (winHeight > 856) {
                    document.getElementById("divform").style.top = "";
                    document.getElementById("divbottom").style.display = "";
                }
                if (winWidth < 1370) {
                    document.getElementById("divtitle").style.display = "none";
                    document.getElementById("divuser").style.left = (winWidth / 2 - 150) + "px";
                    document.getElementById("divform").style.width = winWidth + "px";
                    document.getElementById("divform").style.textAlign = "center";
                }
                if (winWidth > 1371) {
                    document.getElementById("divform").style.width = "1500px";
                    document.getElementById("divform").style.right = "220px";
                    document.getElementById("divtitle").style.display = "";
                    document.getElementById("divform").style.textAlign = "";
                    document.getElementById("divuser").style.left = "";
                    document.getElementById("divuser").style.right = "20px";
                    document.getElementById("divtitlelayer").style.display = "none";
                }
                if (winWidth < 400) {
                    document.getElementById("divuser").style.left = "1px";
                }
                if (winWidth < 845) {
                    document.getElementById("divbottom").style.display = "none";
                    document.getElementById("divtitlelayer").style.display = "none";
                }
                if (winWidth > 846 && winWidth < 1370) {
                    if (winHeight > 856)
                        document.getElementById("divbottom").style.display = "";
                    document.getElementById("divtitlelayer").style.display = "";
                }
                if (winHeight < 800)
                    document.getElementById("imgform").style.height = "800px";
                else
                    document.getElementById("imgform").style.height = winHeight + "px";
            }
            findDimensions();                  //调用函数，获取数值
            window.onresize = findDimensions;
//-->
        </script>
    </body>
</html>

